<template>
  <div>
    <m-tabbar id="m_tabbar" v-model="select">
      <m-tabbar-item id='tab1' path="/home/Home">
        <img src="../../assets/shouye@2x.png" alt="" slot="icon-normal">
        <img src="../../assets/shouyexuabzhong@2x.png" alt="" slot="icon-active">
        <span><router-link to="/home/Home">首页</router-link></span>
      </m-tabbar-item>
      <m-tabbar-item id='tab2' @click="gotoAddress({path: '/content/Content'})">
        <img src="../../assets/luntan@2x.png" alt="" slot="icon-normal">
        <img src="../../assets/luntan-xuanzhong@2x.png" alt="" slot="icon-active">
        <span><router-link to="/content/Content">公告</router-link></span>
      </m-tabbar-item>
      <m-tabbar-item id='tab3'>
        <div class="fabu">
          <router-link to="/publish/Publish">
            <img src="../../assets/fabu.png" alt="">
          </router-link>
        </div>
      </m-tabbar-item>
      <m-tabbar-item id='tab4'>
        <img src="../../assets/gonggao@2x.png" alt="" slot="icon-normal">
        <img src="../../assets/gonggao-xuanzhong@2x.png" alt="" slot="icon-active">
        <span><router-link to="/message/Message">论坛</router-link></span>
      </m-tabbar-item>
      <m-tabbar-item id='tab5'>
        <img src="../../assets/wode@2x.png" alt="" slot="icon-normal">
        <img src="../../assets/wodexuanzhong@2x.png" alt="" slot="icon-active">
        <span><router-link to="/my/My">我的</router-link></span>
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from '../../components/tabbar'
  import mTabbarItem from '../../components/tabbar-item'

  export default {
//    name: 'index',
    components: {
      mTabbar,
      mTabbarItem
    },
    data () {
      return {
        select: 'tab1'
      }
    }
  }
</script>


<style lang="scss">
  #m_tabbar {
    height: 60px;
    .m-tabbar-item {
      position: relative;
      .fabu {
        width: 40px;
        height: 40px;
        /*border: 1px solid #0088cc;*/
        /*border-radius: 50%;*/
        margin-left: 25%;
        margin-top: 5px;
        position: absolute;
        z-index: 22;
        top:-30px;
        left: -6px;
        img {
          width: 40px;
          height: 40px;
        }
        /*span {
          line-height: 40px;
          color: #20a0ff;
          font-size: 14px;
        }*/
      }
      a {
        color: #949494;
        text-decoration: none;
      }
    }
    .m-tabbar-item.is-active .m-tabbar-item-text {
      color: #20a0ff;
    }
    .m-tabbar-item.is-active .m-tabbar-item-text span a {
      color: #20a0ff;
    }
  }
</style>
